<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;padding: 0;
	}
    @media screen and (orientation: portrait) {
    html{
    width : 100% ;
    height : 100% ;
    background-color: white ;
    overflow : hidden;
    }
    body{
    width : 100% ;
    height : 100% ;
    background-color: red ;
    overflow : hidden;
    }
    #print{
    position : absolute ;
    background-color: yellow ;
    }
    } 
    @media screen and (orientation: landscape) {
    html{
    width : 100% ;
    height : 100% ;
    background-color: white ;
    } 
    body{
    width : 100% ;
    height : 100% ;
    background-color: white ;
    }
    #print{
    position : absolute ;
    top : 0 ; 
    left : 0 ;
    width : 100% ;
    height : 100% ;
    background-color: yellow ;
    }
    }
    #print p{
    margin: auto ;
    margin-top : 20px ;
    text-align: center;
    }
	</style>
</head>
<body class="webpBack">
  <div id="print">
      <p>lol</p>  
   </div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script>
	var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        console.log(evt);
        if(evt = 'onorientationchange'){
          console.log(orientation)
        }
         var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){
 
            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }
 
    }, false);
  var width = document.documentElement.clientWidth;
  var height =  document.documentElement.clientHeight;
  if( width < height ){
	console.log(width + " " + height);
	$print =  $('#print');
	$print.width(height);
	$print.height(width);
	$print.css('top',  (height-width)/2 );
	$print.css('left',  0-(height-width)/2 );
	$print.css('transform' , 'rotate(90deg)');
	$print.css('transform-origin' , '50% 50%');
 }
</script>
</html>
<!-- 后面的代码可用，但是要加代码 -->
  <!--   <!Doctype html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
            <title>横竖屏切换检测</title>  
            <style type="text/css">  
                /*这里要配合使用样式控制*/
                .landscape body {  
                    background-color: #ff0000;  
                }  
      
                .portrait body {  
                    background-color: #00ffff;  
                }  
            </style>  
            <script type="text/javascript">  
                (function(){  
                    var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");  
      
                    var updateOrientation=function(){  
                        if(supportOrientation){  
                            updateOrientation=function(){  
                                var orientation=window.orientation;  
                                switch(orientation){  
                                    case 90:  
                                    case -90:  
                                        orientation="landscape";  
                                        break;  
                                    default:  
                                        orientation="portrait";  
                                }  
                                document.body.parentNode.setAttribute("class",orientation);  
                            };  
                        }else{  
                            updateOrientation=function(){  
                                var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";  
                                document.body.parentNode.setAttribute("class",orientation);  
                            };  
                        }  
                        updateOrientation();  
                    };  
      
                    var init=function(){  
                        updateOrientation();  
                        if(supportOrientation){  
                            window.addEventListener("orientationchange",updateOrientation,false);  
                        }else{      
                            window.setInterval(updateOrientation,5000);  
                        }  
                    };  
                    window.addEventListener("DOMContentLoaded",init,false);  
                })();  
            </script>  
        </head>  
        <body>  
            <div>  
                内容  
            </div>  
        </body>  
    </html>   -->